<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 400px;
        height: 300px;
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <!-- 总分：____ -->
    <input type="text" name="" id="ip" />
    <p id="pInfo">info</p>
    <button id="btn">按钮</button>
    <div id="box"></div>

    <script>
      // @流程控制
      // 01 输出100以内全部同时能被3整除的数，最后统计一下数量 +=10
      function fn01() {
        let sum = 0;
        for (var i = 1; i <= 100; i++) {
          if (i % 3 == 0) {
            console.log(i);
            sum++;
          }
        }
        console.log("sum=", sum);
      }
      // fn01()

      // 02 将任意对象（如{name:"jack",age:20,gender:"男",clazz:"2204"}），将其键值以二维数组形式重构 + 0
      // 使结果为[["name":"jack"],["age",20],["gender","男"],["clazz","2204"]]
      // 不许硬编码，必须确保无论给入任何对象，都能正确输出
      function fn02() {
        const obj = { name: "rose", age: 18, gender: "男", clazz: "2204" };
        const arr = [];
        for (var key in obj) {
          arr.push([key, obj[key]]);
        }
        console.log(arr);
      }
      // fn02()

      // 03 循环打印1000以内的随机数，直到得到一个完全平方数（1,4,9,16,25...） +10
      function fn03() {
        while (true) {
          const r = parseInt(Math.random() * 100);
          console.log(r);

          if (Math.sqrt(r) % 1 === 0) {
            break;
          }
        }
      }
      // fn03()

      // @函数封装
      // 04 封装一个函数使之并返回入参a,b之间的随机数，要求使用箭头函数（b不一定大于a）
      let getRandom = (a, b) => {
        if (b <= a) {
          let temp;
          temp = a;
          a = b;
          b = temp;
        }
        return a + Math.round((b - a) * Math.random());
      };
      function fn04() {
        console.log(getRandom(1, 10));
        console.log(getRandom(10, 1));
      }
      // fn04()

      // 05 封装一个能返回随机颜色的函数，如rgb(123,45,67)，点击按钮时调用该函数给按钮的文字设置随机颜色
      function fn05() {
        function getRandomColor() {
          return `rgb(${getRandom(0, 255)},${getRandom(0, 255)},${getRandom(
            0,
            255
          )})`;
        }

        btn.onclick = function (e) {
          let c = getRandomColor();
          console.log(c);
          this.style.color = c;
        };
      }
      // fn05()

      // 06 判断一个数是否为水仙花数（一个三位数，满足各位的立方和相加恰好等于该数本身，例如：153=1^3 + 5^3 + 3^3）
      function fn06() {}

      // 07 输出九九乘法表
      function fn07() {}

      // @系统API（数组、字符串、时间日期、正则）
      // 08 生成50个学生的随机成绩，结构如下：然后映射形成一个带有等级ABC的新数组（必须使用map）
      // 映射前：[{name:"学生1",score:88},{name:"学生2",score:53},...]
      // 映射后：[{name:"学生1",score:88,level:"B"},{name:"学生2",score:53,level:"C"},...]
      function fn08() {
        let arr = [];
        for (var i = 1; i <= 10; i++) {
          arr.push({
            name: `学生${i}`,
            score: Math.round(Math.random() * 100),
          });
        }

        arr = arr.map((item) => ({
          name: item.name,
          score: item.score,
          level: item.score >= 90 ? "A" : item.score >= 60 ? "B" : "C",
        }));
        console.log(arr);
      }
      // fn08()

      // 09 将下列字符串中的脏字替换为等字符数的星号*，使用正则实现
      // "你妹啊！姐尼玛三个月没来大姨妈了！真是坑死你爹我啦！姐特么现在感觉十分的fucking special！"
      function fn09() {}

      // @定时器
      // 10 由用户输入需要倒计时的秒数，点击按钮时显示一个倒计时，结束时显示“boom!!!”并停止计时
      function fn10() {
        btn.onclick = function () {
          let seconds = ip.value * 1;

          // setTimeout(() => {
          //   pInfo.innerText = "BOOM!!!"
          // }, seconds*1000);
          pInfo.innerText = seconds;
          let timer = setInterval(() => {
            pInfo.innerText = --seconds;
            if (seconds === 0) {
              clearInterval(timer);
              pInfo.innerText = "BOOM!!!";
            }
          }, 1000);
        };
      }
      // fn10()

      // 11 每秒产生并打印递增的自然数1、2、3...，直到100为止，点击【暂停/继续】按钮时实现暂停和继续的切换（注意只有一个按钮）
      function fn11() {
        let count = 0;
        let timer = null;

        btn.onclick = function (e) {
          if (!timer) {
            timer = setInterval(() => {
              console.log(++count);
              if (count >= 10) {
                clearInterval(timer);
              }
            }, 1000);
          } else {
            clearInterval(timer);
            timer = null;
          }
        };
      }
      // fn11()

      // @DOM与事件
      // 12 创建年与日时分秒皆随机的Date对象，按格式输出：yyyy年MM月dd日 上午/下午 HH:mm:ss（12小时制）
      function getLengthedNumStr(num, len) {
        let str = "";
        for (var i = 0; i < len - (num + "").length; i++) {
          str += "0";
        }
        str += num;
        return str;
      }

      function fn12() {
        const date = new Date(
          parseInt(Math.random() * 2023),
          parseInt(Math.random() * 13),
          parseInt(Math.random() * 32),
          parseInt(Math.random() * 24),
          parseInt(Math.random() * 60),
          parseInt(Math.random() * 60)
        );
        console.log(date);

        console.log(
          `${getLengthedNumStr(date.getFullYear(), 4)}年${getLengthedNumStr(
            date.getMonth() + 1,
            2
          )}月${getLengthedNumStr(date.getDate(), 2)}日 ${
            date.getHours() > 11 ? "下午" : "上午"
          } ${getLengthedNumStr(date.getHours() % 12, 2)}:${getLengthedNumStr(
            date.getMinutes(),
            2
          )}:${getLengthedNumStr(date.getSeconds(), 2)}`
        );
      }
      fn12();

      // 13 当鼠标在div的边框中移动时实时显示光标相对于div的位置，移出时停止显示
      function fn13() {
        box.onmousemove = function (e) {
          pInfo.innerText = `(${e.offsetX},${e.offsetY})`;
        };
      }
      // fn13();

      // 14 手写深拷贝：deepCopy(obj)返回一个obj的深拷贝副本（必须使用递归）
      // {name:"jack",age:20,gender:"男",clazz:"2106",wife:{name:"rose",age:20,gender:"女",clazz:"2204"}}
      function fn14() {}

      // @面向对象
      // 15 继承链如下：
      // Animal{属性:[legs],方法:[eat]}
      //     ->Person{属性:[name],方法:[think]}
      //         ->Student{属性:[zhuanye],方法:[study]}
      // 造一个学生实例并输出，令其吃饭、思考、学习
      // 使用构造函数+原型而非class进行实现
      // 学生的思考方法需在父类实现基础上进行一定扩展
      function fn15() {
        function Animal(type, legs, food) {
          this.type = type;
          this.legs = legs;
          this.food = food;
        }
        Animal.prototype.eat = function () {
          console.log(`${this.legs}条腿的${this.type}正在浪费${this.food}`);
        };
        Animal.prototype.goDie = function () {
          console.log(`${this.type}眼一闭腿一蹬回去报道了`);
        };

        function Person(name, age) {
          Animal.call(this, "人", 2, "大米饭");
          this.name = name;
          this.age = age;
        }
        Person.prototype = new Animal();
        Person.prototype.think = function () {
          console.log(`${this.name}正在使用它的大脑而不是大腿思考`);
        };

        function Student(name, age, major) {
          Person.call(this, name, age);
          this.major = major;
        }
        Student.prototype = new Person("孙猴子的妈", 500);
        Student.prototype.study = function () {
          console.log(`${this.name}默默打开了Bilibili学习${this.major}`);
        };

        Student.prototype.think = function () {
          Person.prototype.think.call(this);
          console.log("学生think的新扩展");
        };

        const s = new Student("张三丰", 60, "打架");
        s.eat();
        s.think();
        s.study();
      }
      // fn15();

      // 16 随机匹配你的阅卷导师
      // 生成座位号id数组[11...19,21...29,...121...128]
      // 第1~12排的学生人数依次为[8,9,9,9,9,  6,8,8,8,8,  7,8]
      // 生成随机两两匹配结果，例如：[[11,23],[12,45],[13,88]...]
      // 如果学生数量是奇数，则最后一组形如[64,null]
      function fn16() {
        const ids = [];
        const cols = [null, 8, 9, 9, 9, 9, 6, 8, 8, 8, 8, 7, 8];

        for (var i = 1; i <= 3; i++) {
          for (var j = 1; j <= cols[i]; j++) {
            ids.push(i * 10 + j);
          }
        }
        console.log(ids);

        const cps = []
        while(ids.length >= 2){

          let [a] = ids.splice(parseInt(Math.random()*ids.length),1)
          let [b] = ids.splice(parseInt(Math.random()*ids.length),1)

          console.log("a/b",a,b);
          cps.push([a,b])
        }

        if(ids.length){
          cps.push( [ids[0],"臭皮"] )
        }

        console.log(cps);
      }
      fn16();
    </script>
  </body>
</html>
